<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background:url("picture/1.jpg") no-repeat;
            background-position-y: -120px;
        }
        #oper_select{
            width: 400px;
            height: 40px;
        }
    </style>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>

<body>

<select id="oper_select">
    <option value="">选择要查找书籍的分类</option>
    <option value="1">文学</option>
    <option value="2">流行</option>
    <option value="3">文化</option>
    <option value="4">生活</option>
    <option value="5">经管</option>
</select>
<button style="width: 40px;background-color:#fff;"><img src="picture/查找图标.png" style="width: 35px;"></button>
<table class="layui-hide" id="test"></table>

<script src="layui/layui.js" charset="utf-8"></script>
<script>
    var btn=document.querySelector('button')
    btn.onclick=function () {
        var myselect = document.getElementById("oper_select")
        var index = oper_select.selectedIndex
        var oper_value = myselect.options[index].value
        console.log(oper_value)

        layui.use('table', function(){
            var table = layui.table;
            table.render({
                elem: '#test'
                ,url: 'http://8.130.14.155:8080/user/'+oper_value
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,cols: [[
                    {field:'id', width:80, title: 'ID', sort: true}
                    ,{field:'title', width:120, title: '书名'}
                    ,{field:'author', width:120, title: '作者名'}
                    ,{field:'date', width:120, title: '出版日期'}
                    ,{field:'press', title: '出版社', width: 120, minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    ,{field:'abs', title: '简介'}
                    ,{field:'', title: '操作'}
                ]]
                ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": "", //解析提示文本
                        "count": 100, //解析数据长度
                        "data": res.data //解析数据列表
                    };

                }
            })
        })






    }

</script>
</body>

</html>
